<template>
  <div class="Already">
    <div class="English">
      <el-button v-for='(item,index) in English'
                 :key="index"
                 size="small "
                 :type="current===index ? 'primary' : ''"
                 @click="current=index,Vehicle()">{{item}}</el-button>
    </div>
    <div class="VehicleType">
      <el-button v-for='(item,index) in VehicleType'
                 :key="index"
                 :type="currentType===index ? 'primary' : ''"
                 size="small"
                 @click="currentType=index,information()">{{item.name}}</el-button>
    </div>
    <div class="add">
      <el-button type="primary"
                 size="small"
                 @click="brandAdd">车辆品牌添加</el-button>
      <el-button type="primary"
                 size="small"
                 @click="state=0,modifyVisible=true">车辆型号添加</el-button>
    </div>
    <el-table :data="tableData">
      <el-table-column align="center"
                       label="车型"
                       prop="type"></el-table-column>
      <el-table-column align="center"
                       label="排量"
                       prop="series"></el-table-column>
      <el-table-column align="center"
                       label="用油"
                       prop="oil"></el-table-column>
      <el-table-column align="center"
                       label="升数(L)"
                       prop="litre"></el-table-column>
      <el-table-column align="center"
                       label="保养周期(月)"
                       prop="month"></el-table-column>
      <el-table-column align="center"
                       label="保养公里数(KM)"
                       prop="km"></el-table-column>
      <el-table-column align="center"
                       label="价格(元)"
                       prop="price"></el-table-column>
      <el-table-column align="center"
                       label="滤芯补助"
                       prop="filter"></el-table-column>
      <el-table-column align="center"
                       label="操作">
        <template slot-scope="scope">
          <el-button type="primary"
                     size="mini"
                     @click='modifyVisible=true,state=1,id=scope.row.cid,defaultData(scope.row.cid)'>修改</el-button>
          <el-button type="warning"
                     size="mini"
                     @click="Delete(scope.row.cid)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <v-dialog :title="state ? '修改' : '新增'"
              :show.sync='modifyVisible'>
      <el-form ref="form"
               :model='defaultList'
               :rules='rules'
               label-width="15%">
        <el-form-item label="车辆品牌:"
                      v-if='!state'>
          <el-input disabled
                    :value="VehicleType[currentType] && VehicleType[currentType].name"></el-input>
        </el-form-item>
        <el-form-item label="车型:"
                      prop="type">
          <el-input v-model="defaultList.type"
                    placeholder="请输入车型"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="排量:"
                      prop="series">
          <el-input v-model="defaultList.series"
                    placeholder='请输入排量'
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="用油:"
                      prop="oil">
          <el-input v-model="defaultList.oil"
                    placeholder="请输入用油"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="升数(L):"
                      prop="litre">
          <el-input v-model="defaultList.litre"
                    placeholder="请输入升数"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="保养周期(月):"
                      prop="month">
          <el-input v-model="defaultList.month"
                    placeholder="请输入保养周期"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="保养公里数(KM):"
                      prop="km">
          <el-input v-model="defaultList.km"
                    placeholder="请输入保养公里数"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="价格(元):"
                      prop="price">
          <el-input v-model="defaultList.price"
                    placeholder="请输入价格"
                    clearable></el-input>
        </el-form-item>
        <el-form-item label="滤芯补助(元):"
                      prop="filter">
          <el-input v-model="defaultList.filter"
                    placeholder="请输入滤芯补助"
                    clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button @click="modifyVisible=false">取消</el-button>
          <el-button type="primary"
                     @click='state ? modify() : carTypeAdd()'>{{state ? '修改' : '新增'}}</el-button>
        </el-form-item>
      </el-form>
      <div>

      </div>
    </v-dialog>
    <v-pagination :total='total'
                  :page.sync='page'
                  @pagination='information' />
  </div>
</template>

<script>
export default {
  data () {
    return {
      English: [],  //26位英语字母
      current: 0,  //当前车辆
      currentType: 0, //当前车辆类型
      VehicleType: [],  //车辆品牌
      tableData: [],
      total: 0,//总页数
      page: 1, //当前页
      modifyVisible: false,
      defaultList: {
        type: '',
        series: '',
        oil: '',
        litre: '',
        month: '',
        km: '',
        price: '',
        filter: ''
      },
      id: '',
      state: 0, //弹框状态 0 新增 1 修改
      rules: {
        type: { trigger: 'blur', required: true, message: '请输入车型' },
        series: { required: true, message: '请输入排量', trigger: 'blur' },
        oil: { required: true, message: '请输入用油', trigger: 'blur' },
        litre: { required: true, message: '请输入升数', trigger: 'blur' },
        month: { required: true, message: '请输入保养周期', trigger: 'blur' },
        km: { required: true, message: '请输入保养公里数', trigger: 'blur' },
        price: { required: true, message: '请输入价格', trigger: 'blur' },
        filter: { required: true, message: '请输入滤芯补助', trigger: 'blur' }
      }
    }
  },
  watch: {
    current () {
      this.page = 1
    },
    currentType () {
      this.page = 1
    },
    modifyVisible () {
      if (!this.modifyVisible) {  //弹框关闭清空form验证

        this.$nextTick(() => {
          this.$refs['form'].resetFields()

        })

      }
    }
  },
  methods: {
    generate () {  //生成26个英语字母
      for (var i = 65; i < 91; i++) {
        this.English.push(String.fromCharCode(i))
      }
      this.Vehicle()
    },
    async Vehicle () {  //获取车辆信息
      try {
        const res = await this.api.CarBrand({ kt: this.English[this.current] })
        this.VehicleType = res.data || []
        this.information({ page: 1 })
      } catch (err) {
        console.log('报错请联系管理员')
      }
    },
    information () {
      try {
        this.$nextTick(async () => {
          const res = await this.api.CarPages({ id: this.VehicleType[this.currentType] && this.VehicleType[this.currentType].id, page: this.page })
          this.tableData = res.data.list || []

          this.total = res.data.rows || 0
        })
      } catch (err) {
        console.log('报错请联系管理员', err)
      }
    },
    async defaultData (id) {  //获取默认项
      try {
        const res = await this.api.csave_v({ id: id })

        this.defaultList = res.data || this.defaultList

      } catch (err) {
        console.log('报错请联系管理员', err)
      }
    },
    modify () {  //修改
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          const { type, series, oil, litre, month, km, price, filter } = this.defaultList
          try {
            const res = await this.api.Brandcsave({ type: type, series: series, oil: oil, litre: litre, month: month, km: km, price: price, filter: filter, id: this.id })
            if (res.code == 1) {
              this.$message({ message: res.msg, type: 'success' })
              this.modifyVisible = false
              this.information()
            } else {
              this.$message.error(res.msg)
            }
          } catch (err) {
            console.log('报错请联系管理员', err)
          }
        }
      })
    },
    Delete (id) {  //删除
      this.$confirm('此操作将永久删除此项吗, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        try {
          const res = await this.api.BangcarDel({ id: id })
          if (res.code == 1) {
            this.$message({ message: res.msg, type: 'success' })
            this.information()
          } else {
            this.$message.error(res.msg)
          }
        } catch (err) {
          console.log('报错请联系管理员', err)
        }
      }).catch(() => { })
    },
    brandAdd () {  //添加车辆品牌
      this.$prompt('请输入车辆品牌', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        inputPattern: /\S/,
        inputErrorMessage: '车辆品牌不能为空'
      }).then(async ({ value }) => {
        try {
          const res = await this.api.CarBrandAdd({ name: value })
          if (res.code == 1) {
            this.$message({ message: res.msg, type: 'success' })
            this.Vehicle()
          } else {
            this.$message.error(res.msg)
          }
        } catch (err) {
          console.log('报错请联系管理员', err)
        }
      }).catch(() => { })
    },
    async carTypeAdd () {  //新增车辆型号
      this.$refs['form'].validate(async (valid) => {
        if (valid) {
          try {
            const res = await this.api.CarModel(Object.assign({}, this.defaultList, { brand: this.VehicleType[this.currentType].id }))
            if (res.code == 1) {
              this.$message({ message: res.msg, type: 'success' })
              this.modifyVisible = false
              this.information()
            } else {
              this.$message.error(res.msg)
            }
          } catch (err) {
            console.log('报错请联系管理员', err)
          }
        }
      })

    }
  },
  mounted () {
    this.generate()
  }
}
</script>

<style scoped lang='scss'>
.Already {
  margin: 10px;
  .English {
    text-align: left;
    & > button {
      margin-bottom: 10px;
      margin-left: 0;
      margin-right: 10px;
    }
  }
  .add {
    margin: 10px 0;
    padding: 10px 0;
    border-top: 1px solid #ccc;
    border-bottom: 1px solid #ccc;
  }
}
</style>
